<template>
	<view class="content padding">
		<view class="flex justify-between align-center">
			<text class="f40 text-black">请选择您要考试的题库</text>
			<span class="cuIcon-refresh f40 load-cuIcon " @click='spin'></span>
			
		</view>
		<view class="flex align-center mt33">
			<image class="w23 h23" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/wc00001.png" mode="aspectFill"></image>
			<text class="text-gray f24 ml10">已更新至04月25日题库</text>
		</view>
		<view class="mt83 mb45 f30 text-bold text-black">驾驶证/资格证</view>
		<view class="flex justify-around flex-wrap">
			<view class="flex flex-direction align-center w160 h160 justify-center  r20" @click="click(1)" :class="c==1 ?'bg-gray' : ''">
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx000007.png" mode="aspectFill" class="w80 h42"></image>
				<text class="f26 text-black margin-tb-xs">小车</text>
				<text class="f22 text-gray">C1/C2</text>
			</view>
			<view class="flex flex-direction align-center w160 h160 justify-center  r20" @click="click(2)" :class="c==2 ?'bg-gray' : ''">
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx000001.png" mode="aspectFill" class="w65 h55"></image>
				<text class="f26 text-black margin-tb-xs">货车</text>
				<text class="f22 text-gray">A2/B2</text>
			</view>
			<view class="flex flex-direction align-center w160 h160 justify-center  r20" @click="click(3)" :class="c==3 ?'bg-gray' : ''">
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx000003.png" mode="aspectFill" class="w59 h46"></image>
				<text class="f26 text-black margin-tb-xs">客车</text>
				<text class="f22 text-gray">A1/A3</text>
			</view>
		</view>
		<view class="flex justify-around flex-wrap mt20">
			<view class="flex flex-direction align-center w160 h160 justify-center  r20" @click="click(4)" :class="c==4 ?'bg-gray' : ''">
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx000004.png" mode="aspectFill" class="w76 h50"></image>
				<text class="f26 text-black margin-tb-xs">摩托车</text>
			</view>
			<view class="flex flex-direction align-center w160 h160 justify-center  r20" @click="click(5)" :class="c==5 ?'bg-gray' : ''">
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx000002.png" mode="aspectFill" class="w69 h56"></image>
				<text class="f26 text-black margin-tb-xs">特种机械</text>
			</view>
			<view class="flex flex-direction align-center w160 h160 justify-center  r20" @click="click(6)" :class="c==6 ?'bg-gray' : ''">
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/jx000005.png" mode="aspectFill" class="w68 h51"></image>
				<text class="f26 text-black margin-tb-xs">通航</text>
			</view>
		</view>
		<view class="flex justify-center mt200">
			<button class="cu-btn btn flex align-center justify-center">确定</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			c:1
		};
	},
	methods: {
		async click(e){
			this.c = e 
		},
	},
};
</script>

<style lang="scss" scoped>
	.btn {
		width: 686rpx;
		height: 90rpx;
		background: #4687FD;
		border-radius: 45rpx;
		
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
